<template>
<div class="discover" >
	<!-- <scroller>	 -->
        <div class="padR-content" style="height:411px">
			<div class="hotlots-title">
				<text class="betone-title-left-title">热门活动</text>
				<div class="hotlots-title-right" @click="moreRoute()">
					<text class="betone-refresh-name">更多活动</text>
					<image class="hotlots-title-right-moreimg" src="https://goucai-app.oss-cn-beijing.aliyuncs.com/home/bar-right.png" alt=""></image>
				</div>
			</div>
			<scroller class="banner-scroller" show-scrollbar=false  scroll-direction="horizontal">
				<div class="scroller-c" v-for="(bannerImg,index) in lists" :key="index" @click="routeract(bannerImg.href)">
					<image :src="bannerImg.img" class="imgScroll"></image>
				</div>
			</scroller>
		</div>
		<div class="padR-content">
			<div class="hotlots-title">
				<text class="betone-title-left-title">资讯消息</text>
				<div class="hotlots-title-right" @click="routeract('consult')">
					<text class="betone-refresh-name">更多资讯</text>
					<image class="hotlots-title-right-moreimg" src="https://goucai-app.oss-cn-beijing.aliyuncs.com/home/bar-right.png" alt=""></image>
				</div>
			</div>
			<div class="information-box" style="margin-top:15px;">
					<div class="listContent" v-for="(item,key) in infoList" :key="key" @click="getView(item.url,item.no)" v-if="infoList.length > 0">
						<div class="list-left">
							<div class="list-txtTop">
								<text class="title-txt">{{item.title}}</text>
							</div>
							<div class="list-txtBot">
								<template v-if="item.icon !== 0">
                                    <text v-if="item.icon === 1" class="bot-wrap hotSearch">热搜</text>
									<text v-if="item.icon === 2" class="bot-wrap exclusive">独家</text>
									<text v-if="item.icon === 3" class="bot-wrap recommend">力荐</text>
								</template>
								<div class="bot-wrap2">
									<text class="graytxt">{{item.view}}阅读</text>
								</div>
								<div class="bot-wrap3">
									<text class="graytxt txtr">{{item.createTime | filtertime}}</text>
								</div>
							</div>
						</div>
						<div class="list-right" style="justify-content: center;">
							<image class="right-img" :src="item.thumbnail || 'https://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/consultMo.png'"></image>
						</div>
					</div>
					<div  class="norecord" v-else>
						<image style="width:298.5px;height:298.5px;" src="https://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/nocoupon.png"></image>
						<text style="margin-top:71.7px;font-size: 40px;color: #9E8383;">暂无资讯</text>
                    </div>
			</div>
		</div>
		<loading class="loading" @loading="onloading" :display="loadinging ? 'show' : 'hide'">
			<rotate></rotate>
		</loading>
	<!-- </scroller> -->
</div>
</template>

<script>
  import WxcMinibar from "@/components/modules/wxc-minibar/index.js"
  import { serialize, getBaseUrl }  from "@/utils/index.js"
  import rotate from "@/components/modules/rotate";
  import {GetResponsesNotToken} from "@/api.js";
  import Config from "@/tab-bar/topconfig";
  import { Utils } from "weex-ui";
	
  let navigator = weex.requireModule('navigator')
  let modal = weex.requireModule("modal");

  export default {
		data() {
			return {
				currentCity: "杭州",
				norecord: false,
				baseURL:'',
				tabPageHeight: 1334,
				tabStyles: Config.tabStyles,
				loadingshow: false,
				loadinging: false,
				index:0,
				tabFlag:'精选热门',
				tabTagIndex:[],
				infoList:[],
				pagesize: 5, // 一页显示多少条
                pageindex: 1, //当前页
				lists:[{
						name:'',
						img:'https://goucai-app.oss-cn-beijing.aliyuncs.com/home/a.png',
						href:''
					},
					{
						name:'',
						img:'https://goucai-app.oss-cn-beijing.aliyuncs.com/home/b.png',
						href:''
					},
					{
						name:'',
						img:'https://goucai-app.oss-cn-beijing.aliyuncs.com/home/a.png',
						href:''
					},
					{
						name:'',
						img:'https://goucai-app.oss-cn-beijing.aliyuncs.com/home/a.png',
						href:''
					}]
			};
		},
		components: {
			WxcMinibar,
			rotate
		},
		methods: {
			routeract(href) {
				if(!!href) {
					navigator.push({
						url: this.baseURL + `views/${href}/${href}.js`,
						animated: "true"
					})
					return false
				}else{
					modal.toast({ message: "暂未开放，敬请期待" });
				}
			},
			  
			moreRoute(){
				navigator.push({
					url: this.baseURL + `views/discover/activitylist.js`,
					animated: "true"
				})
				
			},
		  //请求资讯列表页数据
			async getresposnedata() {
				let param = {
					appType:"GOUCAI",
					current: this.pageindex,//当前页面
					size: this.pagesize,//分页大小，一页展示多少条
				};
				try {
					let res = await GetResponsesNotToken('trend/v1/news/tagName/'+encodeURIComponent(this.tabFlag), param);   
					this.infoList = this.infoList.concat(res.data.newsWithTagVOList);
					if (this.pageindex != 1) this.norecord = false;

					this.loadinging = false

				} catch (e) {
					modal.toast({message:"失败"});
				}
			},
			//请求阅读量
			async getView(url,tabNum) {
				let param={
					appType:"GOUCAI",
				}
				let res = await GetResponsesNotToken('trend/v1/news/'+tabNum+'/view', param); 
				this.hrefNewPage(url,res.data);
			},
			onloading(event) {
				this.loadinging = true
				this.pageindex++
				this.getresposnedata()
			},
			hrefNewPage(url,view){
				let baseurl =  getBaseUrl(weex.config.bundleUrl, true);
				let urlParmas = {
					url: url,
					view:view
				}
				let jUrl = baseurl + `views/webview/conview_webview.js?` + serialize(urlParmas);
				let params = {
					url: jUrl,
					animated: "true"
				};
				navigator.push(params);
			}
		},
		filters:{
			filtertime(time){
				let date = new Date(+time)
				let formatNum = (num) => { return num < 10 ? "0" + num : num.toString() }
				return `${ date.getFullYear() }-${formatNum(date.getMonth() + 1)}-${ formatNum(date.getDate())}`
			}
		},
		mounted() {
		   this.tabPageHeight = Utils.env.getPageHeight();
		   // 获取路径
		   this.baseURL = getBaseUrl(weex.config.bundleUrl, true)
		},
		created(){
           this.getresposnedata(); //获取资讯列表数据
		}
  
	};
</script>
<style scoped>
.loading{
  width: 750px;
  display: flex;
  align-items: center;
}
.discover {
width:750px
}
.header-title {
  font-size: 34px;
  color: #fff;
  font-weight: 600;
  font-family: PingFangSC-Medium;
}


.padR-content{
  width: 750px;	
  background-color: #fff;
  padding-top: 24px;
  padding-bottom: 24px;
  padding-right: 30px;
  padding-left: 30px;
  margin-top: 24px;
}
.hotlots-title{
  justify-content: space-between;
  flex-direction: row;
}
.betone-title-left-title{
  font-size:34px;
  color: #333;
  font-family:PingFangSC-Medium;
}
.betone-refresh-name{
  font-size:24px;
  color: #666;
  font-family:PingFangSC-Regular;
}
.hotlots-title-right-moreimg {
  height: 40px;
  width: 40px;
  align-self: center;
  margin-left: 5px;
}
.hotlots-title-right{
	flex-direction: row;
    justify-content: center;
    align-items: center;
}
.banner-scroller{
   width: 750px;
   height: 300px;
   padding-top: 40px;
   flex-direction: row;
}
.imgScroll{
  width: 444px;
  height: 250px; 	
  margin-right: 32px;
}
.listContent{
    flex-direction: row;
	justify-content: space-between;
	padding-top: 25px;
	padding-bottom: 25px;
	border-bottom-width: 1px;
	border-bottom-color: #DCDCDC;
	border-bottom-style: solid;
}
.list-left{
   flex-direction: column;
   justify-content: space-between;
   width:432px;
   margin-right:30px;
}
.right-img{
  width:222px;
  border-radius: 4px;
  align-items: center;
  height:148px;
}
.title-txt{
	font-size:32px;
	color: #333;
	line-height: 45px;
    font-family:PingFangSC-Regular;
}
.list-txtBot{
	margin-top: 28px;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}
.bot-wrap{
   width: 64px;
   height: 28px;
   border-radius: 4px;
   line-height: 28px;
   font-size:20px;
   text-align: center;
   font-family:PingFangSC-Medium;
}
.hotSearch{
	color: #E53A36;
	border:1px solid #E63A36;
}
.exclusive{ 
	color: #578EE9;
	border:1px solid #578EE9;
}
.recommend{
	color: #F99F3B;
	border:1px solid #F99F3B;
}
.graytxt{
	font-size:28px;
	color: #999;
  font-family:PingFangSC-Regular;
}
.norecord {
    padding-top: 158px;
    padding-left: 225.8px;
    padding-right: 225.8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
</style>